<template>
  <div id="app">
    <nav class="nav">
      <top-bar></top-bar>
      <div class="linknav">
        <router-link class="link" to="/">Home</router-link>
        <router-link class="link" to="/aboutpet">AboutPet</router-link>
        <router-link class="link" to="/knowofpet">KnowOfPet</router-link>
        <router-link class="link" to="/petconsult">PetConsult</router-link>
        <router-link class="link" to="/comment">Comment</router-link>
        <router-link class="link" to="/notice">Notice</router-link>
        <router-link class="link" to="/petdoctor">PetDoctor</router-link>
        <router-link class="link" to="/aboutus">AboutUS</router-link>
        <router-link class="link" to="/joinus">JoinUs</router-link>
        <router-link class="link" to="/userinfo">userinfo</router-link>
        <button class="link" id="btn" v-if="disl_r" @click="changeDisl_r">
          <router-link to="/MyLogin" class="link link1">Login|Register</router-link>
        </button>
        <button class="link" id="btn" v-show="disout" @click="changeDisout">
          <router-link class="link link1" to="/">leave</router-link>
        </button> 
      </div>


    </nav>
    <router-view></router-view>

  </div>
</template>

<script>
  import topBar from '@/components/TopBar.vue'
  import MyLogin from './components/MyLogin.vue';
  // import comment from '@/views/Comment.vue'

  export default {
    data() {
      uid:localStorage.getItem('userId');
      disout: false;
      disl_r: true;
      return {
        
        disl_r: true,
        disout: false,
      }
    },
    components: {

      topBar,
      MyLogin

    },
    computed: {
      
    },
    mounted(){
          console.log('uid_app:',this.uid);
      },
    created() {

      this.getUser();
    },
    methods: {
      getUser() {

      },
      changeDisl_r() {
        this.disl_r = !this.disl_r;
        this.disout = !this.disout;
        alert("欢迎回来");
        console.log("login");
        // () => import('../components/MyLogin.vue')
      },
      changeDisout() {
        this.disl_r = !this.disl_r;
        this.disout = !this.disout;
        localStorage.removeItem('userId');
        // this.$route.params.UserAccount='';  
        alert("确定离开");
        console.log("gout");
      }
    }
  }
</script>


<style scoped>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* text-align: center; */
    color: #2c3e50;
    background-color: #f3f4f7;
  }


  nav a.router-link-exact-active {
    color: pink;
  }

  .link {
    margin: 1em;
    position: relative;
    /* top: 2.5rem; */
    font-size: 1.3rem;
    text-align: center;
    text-decoration: none;
    /* overflow: hidden; */
  }

  .nav {
    height: 100%;
    text-align: center;
  }

  .linknav {
    /* width: 100%; */
    background: #fff;
    /* 避免由内边距撑开容器本身大小的问题 */
    box-sizing: border-box;
    padding: 10px;
    /* overflow: scroll; */
    /* position: relative;
    bottom: 10rem; */
  }


#btn{
  border: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
  @media screen and (max-width:768px) {

    /* 手机屏幕 */
    .linknav {
      /* padding: 0.1px; */
      width: 100%;
      /* word-spacing: normal; */
      word-wrap: break-word;
      width: 100%;
      /* margin:0rem 5%; */
      /* margin: 0px 1rem; */
    }

    .link {
      /* word-wrap: break-all; */
      font-size: 1px;
      padding-left: 10px;
      /* margin: 0; */
    }
  }

  @media screen and (max-width:992px) and (min-width:768px) {

    /* 平板 */
    .linknav {
      padding: 12px;
      width: 100%;
      /* word-spacing: normal; */
      word-wrap: break-word;
      width: 100%;
      /* background-color: black; */
      /* margin: 0px 1rem; */
    }
  }
</style>